<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="form"
        :model="containerTypeForm"
        :rules="rules"
        :disabled="operation === 0"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >
        <el-form-item
          v-if="operation !== 1"
          :label="$t('containerTypeLang.containerTypeStatus')"
        >
          <div style="margin-left: 5px">
            {{
              $t(
                getTitleByValue(
                  depotStatusOptions,
                  containerTypeForm.containerTypeStatus
                )
              )
            }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('depotLang.depot')"
          :prop="operation === 1 ? 'depotId' : ''"
        >
          <el-select
            v-if="operation === 1"
            v-model="containerTypeForm.depotId"
            :placeholder="$t('pleaseSelect')"
            style="width: 100%"
          >
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>
          <div v-else style="margin-left: 5px">
            {{ containerTypeForm.depotCodeAndName }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('containerTypeLang.containerTypeCode')"
          prop="containerTypeCode"
        >
          <el-input
            v-model="containerTypeForm.containerTypeCode"
            v-if="operation === 1"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
          <div style="margin-left: 5px" v-else>
            {{ containerTypeForm.containerTypeCode }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('containerTypeLang.containerTypeName')"
          prop="containerTypeName"
        >
          <el-input
            v-model="containerTypeForm.containerTypeName"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('unitLang.sizeType')" prop="sizeType">
          <el-radio-group v-model="containerTypeForm.sizeType">
            <el-radio
              v-for="item in sizeTypeOptionList"
              :key="item.value"
              :label="item.value"
              >{{ $t("unitLang." + item.title) }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div v-if="containerTypeForm.sizeType !== 1">
          <el-form-item
            :label="$t('unitLang.length') + '(CM)'"
            prop="containerTypeLength"
          >
            <el-input
              v-model="containerTypeForm.containerTypeLength"
              :placeholder="$t('pleaseEnter')"
              clearable
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item
            :label="$t('unitLang.width') + '(CM)'"
            prop="containerTypeWidth"
          >
            <el-input
              v-model="containerTypeForm.containerTypeWidth"
              :placeholder="$t('pleaseEnter')"
              clearable
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item
            :label="$t('unitLang.height') + '(CM)'"
            prop="containerTypeHeight"
          >
            <el-input
              v-model="containerTypeForm.containerTypeHeight"
              :placeholder="$t('pleaseEnter')"
              clearable
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item
            :label="$t('unitLang.volume')"
            required
            prop="containerTypeVolume"
          >
            <div>
              <span>{{ volume }}</span>
            </div>
          </el-form-item>
        </div>
        <el-form-item :label="$t('remark')" prop="remark">
          <el-input
            v-model="containerTypeForm.remark"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" size="small" @click="handleSubmit">{{
          $t("submit")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import to from "await-to-js";
import { depotStatusDict, sizeTypeDict } from "@/utils/dictData";
import { getDictOptionList, getTitleByValue } from "@/utils/dictUtils";
import {
  getDepotList,
  getDepotListAllStatus,
} from "@/api/business/depotManage/depot";
import {
  addDepotContainerType,
  getDepotContainerType,
  modifyDepotContainerType,
} from "@/api/business/depotManage/containerType";
export default {
  name: "containerType",
  props: {
    value: {
      type: Number,
      default: null,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    operation: {
      type: Number,
      default: 0, //0 查看 1 新增 2 修改
    },
    title: {
      type: String,
      default: null,
    },
    width: {
      type: String,
      default: "750px",
    },
  },
  data() {
    return {
      regionList: [],
      containerTypeForm: {
        depotId: null,
        containerTypeCode: null,
        containerTypeName: null,
        sizeType: null,
        containerTypeLength: null,
        containerTypeWidth: null,
        containerTypeHeight: null,
        containerTypeVolume: null,
        remark: null,
      },
      getTitleByValue: getTitleByValue,
      depotStatusOptions: getDictOptionList(depotStatusDict), // 状态
      sizeTypeOptionList: getDictOptionList(sizeTypeDict), //三围
      rules: {
        depotId: {
          required: true,
          message: this.$t("pleaseSelect") + " " + this.$t("depotLang.depot"),
          trigger: "change",
        },
        containerTypeCode: {
          required: true,
          message:
            this.$t("pleaseEnter") +
            " " +
            this.$t("containerTypeLang.containerTypeCode"),
          trigger: "blur",
        },

        containerTypeName: {
          required: true,
          message:
            this.$t("pleaseEnter") +
            " " +
            this.$t("containerTypeLang.containerTypeName"),
          trigger: "blur",
        },
        sizeType: {
          required: true,
          message: this.$t("pleaseSelect"),
          trigger: "change",
        },
        containerTypeLength: [
          {
            required: true,
            message: this.$t("pleaseEnter"),
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: this.$t("onlyNumber"),
            trigger: "blur",
          },
        ],
        containerTypeWidth: [
          {
            required: true,
            message: this.$t("unitLang.width"),
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: this.$t("onlyNumber"),
            trigger: "blur",
          },
        ],
        containerTypeHeight: [
          {
            required: true,
            message: this.$t("unitLang.height"),
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: this.$t("onlyNumber"),
            trigger: "blur",
          },
        ],
        containerTypeVolume: {
          required: true,
          message: this.$t("notNull"),
          trigger: "blur",
        },
      },
    };
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (
          newValue !== null &&
          newValue !== undefined &&
          newValue !== oldValue
        ) {
          this.getData();
        }
      },
    },
  },
  created() {
    this.getData();
    this.getDepotList();
    this.getAllDepotList();
  },

  computed: {
    volume() {
      return (
        this.containerTypeForm.containerTypeLength *
          this.containerTypeForm.containerTypeWidth *
          this.containerTypeForm.containerTypeHeight || 0
      );
    },
  },
  methods: {
    reset() {
      this.containerTypeForm = {
        depotId: null,
        containerTypeCode: null,
        containerTypeName: null,
        sizeType: null,
        containerTypeLength: null,
        containerTypeWidth: null,
        containerTypeHeight: null,
        containerTypeVolume: null,
        remark: null,
      };
      this.$refs.form.resetFields();
    },
    async getData() {
      if (!this.value || this.operation === 1) return;
      const res = await getDepotContainerType({
        containerTypeId: this.value,
      });
      this.containerTypeForm = res.data;
    },
    // 获取仓库下拉
    async getDepotList() {
      const { data } = await getDepotList();
      console.log(data);
      this.regionList = data;
    },
    // 获取所有仓库下拉
    async getAllDepotList() {
      const { data } = await getDepotListAllStatus();
      console.log(data);
      // this.regionList = data;
    },
    async handleSubmit() {
      this.containerTypeForm.containerTypeVolume = this.volume;
      const [err] = await to(this.$refs.form.validate());
      if (err === null) {
        if (this.operation === 1) {
          const res = await addDepotContainerType({
            ...this.containerTypeForm,
          });
          if (res && res.returnCode === 10000) {
            this.$emit("close");
            this.$emit("update:operation", 2);
            this.$message({
              type: "success",
              message: this.$t("handleSuccess"),
            });
          }
        } else if (this.operation === 2) {
          const res = await modifyDepotContainerType({
            ...this.containerTypeForm,
          });
          if (res && res.returnCode === 10000) {
            this.$emit("close");
            this.$message({
              type: "success",
              message: this.$t("handleSuccess"),
            });
          }
        }
      }
    },
    // 关闭弹窗
    close() {
      this.$emit("close");
    },
    // 关闭弹窗
    closed() {
      this.reset();
    },
  },
};
</script>

<style></style>
